<!--@author vidy3587@gmail.com-->
<template>
  <div class="host-video-page">
    <keep-alive include="HostVote">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style scoped lang="scss">
$headerBgLeft: px2rem((750px - 690px)/2 + 20px);

::v-deep {
  .host-video-page {
    min-height: 100vh;
    background-color:$mainThemeColor;
  }
  .publish-header {
    content: "";
    display: block;
    @include withBg("~@/assets/publish_header_bg.png", px2rem(670px), px2rem(180px), $headerBgLeft, top);
    width: 100%;
    height: px2rem(180px);
    &.publish-header-rank {
      @include withBg("~@/assets/rank_head.png", px2rem(690px), px2rem(215px), px2rem((750px - 690px)/2), top);
    }
  }

  .with-repeat-bg {
    @include withBg("~@/assets/vote_zone_bg.png", px2rem(690px), px2rem(590px), center, px2rem(-580px), repeat-y);
    //min-height: 2000px;

  }
  .rank-badge-top {
    padding-top: px2rem(120px);
  }
  .rank-badge {
    display: inline-flex;
    background: $warmColor;
    border: px2rem(1px) solid #111111;
    width: px2rem(264px);
    height: px2rem(63px);
    align-items: center;
    font-size: px2rem(36px);
    padding-left: px2rem(24px);
    border-top-right-radius: px2rem(20px);
  }

  .rank-icon {
    width: px2rem(36px);
    height: px2rem(36px);
  }
}
</style>